<template>
    <div class="headerWrap">
        <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
            style="background-color: #1C3F56;" :with-header="false" title="">
            <Drawer :drawer="drawer" @childfn="fn" />
        </el-drawer>
        <div class="hleft">
            <div class="left-1">
                <img src="@/assets/menu1.svg" alt="menu" @click="openDrawer" class="menu">
                <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
            </div>
<div class="right" >
    <div class="search" @click="handlesearch">
                <img src="@/assets/home.svg" alt="找不到图片">
            </div>
            <div class="langWrap">
                <img src="@/assets/setting.svg" @click="handleShowLang" class="second">
                <Lang ref="lang" class="lang" />
            </div>
</div>
            
        </div>
        <!-- <div class="downLoad">
            <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
            <img src="@/assets/1x/source3.png" alt="找不到图片">
        </div> -->
    </div>
</template>

<script lang="ts">
export default {
    name: "IPOHeader",
};
</script>

<script lang="ts" setup>
import i18n from '@/locales'
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue";
import { ipoStore } from '@/stores/ipo';
const lang = ref()
const store = ipoStore()
const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any)
const handlesearch = () => {
    proxy.$router.push("/home")
    store.setMobileActiveShow(1)
}
const handleDrawer = (done: () => void) => {
    done();
}
const openDrawer = () => {
    drawer.value = true;
}
const handleShowLang = (e: any) => {
    e.stopPropagation()
    lang.value.showLang = !lang.value.showLang
}
onMounted(() => {
    // document.documentElement.onclick = function () {
    //     if (!lang.value.showLang) return
    //     lang.value.showLang = false
    // }
    document.documentElement.addEventListener('click',function(){
        if (!lang.value?.showLang) return
        if(lang.value){
            lang.value.showLang = false
        }
       
    })
})
//const data1 =ref()
// onMounted(() => {
//     const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
//    data1.value = obj
//    console.log(data1.value);
   
// })
function fn(data: any) {
    drawer.value = data
}
onUnmounted(() => {
  //  document.documentElement.onclick = null
})
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
    .headerWrap {
        margin-left: 18px;
    }
}
.right{
    display: flex;
    margin-left: 10px;
   // margin-top: 5px;
    align-items: center;
    @media screen and (max-width: 768px) {
    margin-right: 8vw;
    //background-color: red;
}
}
.langWrap {
    //   position: absolute;
    // //   top:-20px;
    //   left: 260px;
    //   display: flex;
    //   align-items: end;
    position: relative;
    margin-left: 15px;

    @media screen and (max-width: 768px) {
     display: none;
       // display: flex;
    }

    .second {

        width: 30px;
        height: 30px;
        margin-top: 4px;
        cursor: pointer;
        // &:hover {
        //     transform: scale(1.2);
        // }
    }
}

.lang {
    position: absolute;
    top: 50px;
    left: -50px;

    @media screen and (max-width: 768px) {
        left: -110px;
    }
}

.headerWrap {
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 1000px;
    align-items: center;
    @media screen and (max-width: 768px) {

        .left-1 {
            display: flex;
          // background-color: red;
           align-items: center;
           height: 30px;
        }
    }

    .hleft {
        display: flex;
        justify-content: space-between;
        width: fit-content;
        align-items: center;
        //position: relative;
        //background-color: red;
        @media screen and (max-width: 768px) {
            width: 100vw;
           // background-color: #1C3F56;
        }

        .menu {
            display: none;

            @media screen and (max-width: 768px) {
                display: block;
              //  vertical-align: middle;
                width: 25px;
                height: 20px;

            }
        }

        .title {
            color: #2B4A60;
            font-size: 45px;
            font-weight: bolder;

            @media screen and (max-width: 768px) {
                font-size: 24px;
                margin-left: 10px;
               // padding-top: 4px;
                //transform: translateX(-60px);
               // display: inline;
            }
        }

        .search {
            //background-color: #fff;
           // width: 30px;
       // height: 30px;
          //  border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
           // margin-left: 15px;
          //  margin-top: 6px;
            cursor: pointer;

            img {
                width: 30px;
                height: 30px;
            //     &:hover {
            //    transform: scale(1.2);
       // }
                @media screen and (max-width: 768px) {
              // margin-top: -10px;
              width: 25px;
                height: 25px;
            }
            }
            
        }
    }

    .downLoad {
        display: flex;
        height: 30px;
        align-items: center;

        .report {
            font-size: 28px;
            color: #1C3F56;
            margin-right: 10px;
        }

        img {
            width: 20px;
            margin-top: 2px;

            &:hover {
                transform: scale(1.2);
            }
        }

    }
}
</style>